<template>
  <div class="white">
    <div class="left_nb_body">
      <div class="title">
        <span>
          <svg-icon icon-class="f_zanzhu" class="svg-icon"></svg-icon>
        </span>
        会议赞助
      </div>
      <p class="content">
        会议赞助为申请机制，申请通过后，上传赞助报告，报告审核通过后，进行会议直播！
      </p>
      <div style="position: relative; z-index: 2">
        <div class="left_tp1">
          <h6>Stop 1</h6>
          <div class="tp1_content">
            <svg-icon icon-class="tp1" class="svg-icon2"></svg-icon>
            <div>
              <h4>赞助申请</h4>
              <span>选择会议主题和赞助方式，提报申请</span>
            </div>
          </div>
        </div>
        <div class="success">
          <span class="sc_tg_parent" v-if="setpData.stepExamineOneStatus != 1"><span
              class="sc_tg"><span></span></span></span>
          <span class="sc_tg_parent2" v-if="setpData.stepExamineOneStatus == 1"><span></span></span>
          <span>赞助审核</span>
          <span class="sc_zt" v-if="setpData.stepExamineOneStatus == 3">审核已驳回</span>
          <span class="sc_tgs" v-if="setpData.stepExamineOneStatus == 4">审核已通过 </span>
          <img src="@/assets/img/Vectorl.png" v-if="setpData.stepExamineOneStatus == 4" class="success_shu">
          <img src="@/assets/img/Vectorh.png" v-if="setpData.stepExamineOneStatus == 1" class="success_shu">
          <img src="@/assets/img/Group2.png" v-if="setpData.stepExamineOneStatus == 2 || setpData.stepExamineOneStatus == 3"
            class="success_shu">
        </div>
        <div class="left_tp1">
          <h6>Stop 2</h6>
          <div class="tp1_content">
            <svg-icon v-if="setpData.step > 1" icon-class="tp1" class="svg-icon2"></svg-icon>
            <div>
              <h4>上传报告内容</h4>
              <span>赞助审核通过后，上传赞助的报告</span>
            </div>
          </div>
        </div>
        <div class="success">
          <span class="sc_tg_parent" v-if="setpData.stepExaminetwoStatus != 1"><span
              class="sc_tg"><span></span></span></span>
          <span class="sc_tg_parent2" v-if="setpData.stepExaminetwoStatus == 1"><span></span></span>
          <span>报告审核</span>
          <span v-if="setpData.stepExaminetwoStatus == 2" class="col7e8 fs12" style="padding-left: 5px;">审核中</span>
          <span class="sc_zt" v-if="setpData.stepExaminetwoStatus == 3">审核已驳回</span>
          <span class="sc_tgs" v-if="setpData.stepExaminetwoStatus == 4">审核已通过 </span>
          <img src="@/assets/img/Vectorl.png" v-if="setpData.stepExaminetwoStatus == 4" class="success_shu">
          <img src="@/assets/img/Vectorh.png" v-if="setpData.stepExaminetwoStatus == 1" class="success_shu">
          <img src="@/assets/img/Group2.png" v-if="setpData.stepExaminetwoStatus == 2 || setpData.stepExaminetwoStatus == 3"
            class="success_shu">
        </div>
        <div class="left_tp1">
          <h6>Stop 3</h6>
          <div class="tp1_content">
            <svg-icon v-if="setpData.step > 2" icon-class="tp1" class="svg-icon2"></svg-icon>
            <div>
              <h4>会后管理</h4>
              <span>会议结束后，获取会后数据报告</span>
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/img/w_1.png" class="btm_img" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    //.step:进行的步骤  .stepExamineOneStatus 赞助审核的状态 1 立即赞助 2 审核中 3审核已驳回 4审核通过
    //.stepExaminetwoStatus  报告审核的状态 1 填写报告 2 审核中 3审核已驳回 4审核通过
    setpData: Object
  }
};
</script>

<style lang="scss" scoped>
@media only screen and (max-width:1599px) {
  .white {
    background: #fff;
    min-width: 295px;
    width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 555px;
    padding: 10px;

    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 25px);
      padding: 10px 10px;
      position: relative;
    }

    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 10px;

      .svg-icon {
        font-size: 20px;
        padding: 7px;
        background: #0c7ff2;
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }

    .content {
      font-size: 12px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 10px;
    }

    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .left_tp1 {
      padding: 12px 0 12px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
      z-index: 3;

      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .tp1_content {
        @include flex(row, center, flex-start);

        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }

        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }

    .success {
      @include flex(row, center, flex-start);
      padding: 20px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;

      .success_shu {
        position: absolute;
        top: -28px;
        left: 26px;
        z-index: 1;
        height: 152px;
        width: 4px;
      }
    }

    .sc_tg_parent {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;

      .sc_tg {
        display: inline-block;
        border: 1px solid #0c7ff2;
        height: 16px;
        border-radius: 50%;
        margin: 10px;

        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #0c7ff2;
          margin: 2px;
        }
      }
    }

    .sc_tg_parent2 {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;
      padding: 10px;
      width: 20px;
      height: 20px;

      span {
        width: 18px;
        height: 18px;
        display: inline-block;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ecf0f5;
        ;
      }
    }

    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }

    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}

@media only screen and (min-width: 1600px) and (max-width:3000px) {
  .white {
    background: #fff;
    min-width: 295px;
    width: 295px;
    height: calc(100vh - 105px);
    border-radius: 4px;
    min-height: 670px;
    padding: 10px;

    .left_nb_body {
      background: linear-gradient(231deg, #dbe4f5 0%, #fbfcfe 100%);
      border-radius: 4px;
      height: calc(100% - 50px);
      padding: 25px 20px;
      position: relative;
    }

    .title {
      @include flex(row, center, flex-start);
      font-size: 16px;
      font-weight: 600;
      color: #4f5862;
      line-height: 19px;
      margin-bottom: 15px;

      .svg-icon {
        font-size: 20px;
        padding: 7px;
        background: #0c7ff2;
        border-radius: 6px 6px 6px 6px;
        display: inline-block;
        margin-right: 10px;
        color: #fff;
      }
    }

    .content {
      font-size: 12px;
      color: #4f5862;
      line-height: 24px;
      margin-bottom: 20px;
    }

    .btm_img {
      display: inline-block;
      width: 126px;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .left_tp1 {
      padding: 14px 0 19px 15px;
      background: rgba(255, 255, 255, 0.79);
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #cee5fc;
      position: relative;
      z-index: 3;

      h6 {
        font-size: 12px;
        color: #7e8790;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .tp1_content {
        @include flex(row, center, flex-start);

        .svg-icon2 {
          font-size: 22px;
          display: inline-block;
          margin-right: 9px;
        }

        h4 {
          font-size: 14px;
          font-weight: 600;
          color: #4f5862;
          line-height: 16px;
          margin-bottom: 5px;
        }

        span {
          font-size: 12px;
          color: #7e8790;
          line-height: 14px;
        }
      }
    }

    .success {
      @include flex(row, center, flex-start);
      padding: 30px 9px;
      font-size: 14px;
      font-weight: 600;
      color: #4f5862;
      line-height: 16px;
      position: relative;

      .success_shu {
        position: absolute;
        top: -28px;
        left: 26px;
        z-index: 1;
        height: 152px;
        width: 4px;
      }
    }

    .sc_tg_parent {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;

      .sc_tg {
        display: inline-block;
        border: 1px solid #0c7ff2;
        height: 16px;
        border-radius: 50%;
        margin: 10px;

        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #0c7ff2;
          margin: 2px;
        }
      }
    }

    .sc_tg_parent2 {
      background: #ecf0f5;
      position: relative;
      z-index: 3;
      border-radius: 50%;
      padding: 10px;
      width: 20px;
      height: 20px;

      span {
        width: 18px;
        height: 18px;
        display: inline-block;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ecf0f5;
        ;
      }
    }

    .sc_zt {
      background: #ff6332;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }

    .sc_tgs {
      background: #11ad29;
      border-radius: 2px 2px 2px 2px;
      font-size: 12px;
      color: #ffffff;
      line-height: 14px;
      padding: 3px 4px;
      margin-left: 16px;
    }
  }
}</style>